<template>
	<view class="">
		<view v-if="userType === 1" class="patient-management-container">
			<!-- 搜索栏 -->
			<!-- <view class="patient-search-wrapper">
				<view class="patient-search-bar">
					<text class="patient-search-icon">🔍</text>
					<input class="patient-search-input" type="text" placeholder="搜索患者姓名、手机号"
						v-model="patientSearchKeyword" @input="searchPatients" />
					<text v-if="patientSearchKeyword.length > 0" class="patient-clear-icon"
						@click="clearSearch">✕</text>
				</view>
				<view class="patient-add-btn" @click="openPatientModal">+ 添加患者</view>
			</view> -->

			<!-- 患者列表 -->
			<scroll-view class="patient-list-scroll" scroll-y="true">
				<view v-for="(patient,index) in patientList" :key="index" class="patient-list-item">
					<view class="patient-info">
						<view class="patient-header">
							<text class="patient-name">{{ patient.patient }}</text>
						</view>
						<view class="patient-details">
							<text class="patient-phone">📱 {{ patient.phone }}</text>
							<text class="patient-history">🩺 {{ patient.medicalHistory || '暂无病史' }}</text>
						</view>
					</view>
					<view class="patient-actions">
						<view class="patient-edit-btn" @click="openPatientModal(patient)">编辑</view>
						<view class="patient-delete-btn" @click="deletePatient(patient.id)">删除</view>
					</view>
				</view>
			</scroll-view>

			<!-- 患者模态框 -->
			<view v-if="showPatientModal" class="patient-modal-overlay" @click.self="showPatientModal = false">
				<view class="patient-modal-content">
					<view class="patient-modal-header">
						{{ patientFormData.id ? '编辑患者信息' : '添加新患者' }}
					</view>
					<view class="patient-form">
						<view class="patient-form-item">
							<text>姓名</text>
							<input v-model="patientFormData.name" placeholder="请输入患者姓名" />
						</view>
						<view class="patient-form-item">
							<text>年龄</text>
							<input type="number" v-model="patientFormData.age" placeholder="请输入患者年龄" />
						</view>
						<view class="patient-form-item">
							<text>性别</text>
							<input class="form-input" v-model="patientFormData.gender" placeholder="请输入性别" />
						</view>
						<view class="patient-form-item">
							<text>手机号</text>
							<input type="number" v-model="patientFormData.phone" placeholder="请输入手机号" />
						</view>
						<view class="patient-form-item">
							<text>病史</text>
							<textarea v-model="patientFormData.medicalHistory" placeholder="请输入患者病史" />
						</view>
					</view>
					<view class="patient-modal-footer">
						<view class="patient-modal-cancel" @click="showPatientModal = false">取消</view>
						<view class="patient-modal-confirm" @click="savePatient">保存</view>
					</view>
				</view>

			</view>
			<view class="health-online-section">
				<view class="health-header">
					<view class="health-title-container">
						<!-- <image class="health-icon" src="/static/images/health-icon.png"></image> -->
						<text class="health-title">健康动态</text>
					</view>
					<!-- <text class="more-text">更多 ></text> -->
				</view>

				<view class="tabs">
					<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
						:class="{ active: activeTab === index }" @click="changeTab(index)">
						{{ tab }}
					</view>
				</view>

				<view class="article-list">
					<view class="article-item" v-for="(article, index) in displayedArticles" :key="index"
						@click="openArticle(article)">
						<view class="article-content">
							<text class="article-title">{{ article.title }}</text>
							<view class="article-info">
								<image class="author-avatar" :src="article.avatar"></image>
								<text class="author-name">{{ article.author }}</text>
								<text class="article-date">{{ article.date }}</text>
								<text class="article-views">{{ article.views }}阅读</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="container">
			<view class="search-bar">
				<view class="search-input-wrapper">
					<text class="search-icon">🔍</text>
					<input class="search-input" type="text" placeholder="搜索医生、科室、疾病" confirm-type="search"
						v-model="searchKeyword" @input="onSearchInput" @confirm="submitSearch" />
					<text v-if="searchKeyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
				</view>
				<view class="search-button" @click="submitSearch">搜索</view>

				<!-- 搜索结果下拉框 -->
				<view v-if="showSearchResults" class="search-results">
					<view v-if="searchResults.doctors.length === 0 && searchResults.departments.length === 0"
						class="no-results">
						未找到相关结果
					</view>

					<view v-if="searchResults.doctors.length > 0" class="result-section">
						<view class="result-section-title">医生</view>
						<view v-for="(doctor, index) in searchResults.doctors" :key="'dr-'+index" class="result-item"
							@click="selectSearchResult('doctor', doctor)">
							<image class="" style="width: 60rpx;height: 60rpx;border-radius: 100%;margin-right: 10rpx;"
								:src="doctor.avatar"></image>
							<view class="result-content">
								<text class="result-primary">{{doctor.name}}</text>
								<text class="result-secondary">{{doctor.department}} - {{doctor.title}}</text>
							</view>
						</view>
					</view>

					<view v-if="searchResults.departments.length > 0" class="result-section">
						<view class="result-section-title">科室</view>
						<view v-for="(dept, index) in searchResults.departments" :key="'dept-'+index"
							class="result-item" @click="selectSearchResult('department', dept)">
							<text class="result-icon">🏥</text>
							<text class="result-primary">{{dept}}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="main-services">
				<view class="service-card" @click="navigateToService('appointment')">
					<image class="service-icon" src="/static/index/yuyue.png"></image>
					<view class="service-title">预约挂号</view>
					<view class="service-subtitle">快速预约医生</view>
				</view>

				<view class="service-card" @click="navigateToService('ai-consultation')">
					<image class="service-icon" src="/static/index/zaixian.png"></image>
					<view class="service-title">在线问诊</view>
					<view class="service-subtitle">AI医生24小时在线</view>
					<view class="tag-container">
					</view>
				</view>

				<view class="service-card" @click="navigateToService('doctor-search')">
					<image class="service-icon" src="/static/index/doctor.png"></image>
					<view class="service-title">医生查找</view>
					<view class="service-subtitle">寻找专业医生</view>
				</view>
			</view>

			<view class="quick-access-section">
				<view class="section-header">
					<text class="section-title">快捷服务</text>
				</view>

				<view class="quick-access-grid">
					<view class="quick-item" @click="navigateToQuickService('appointment')">
						<image class="quick-icon" src="/static/index/quhao.png"></image>
						<text class="quick-text">预约取号</text>
					</view>
					<view class="quick-item" @click="navigateToQuickService('payment')">
						<image class="quick-icon" src="/static/index/menzhen.png"></image>
						<text class="quick-text">门诊缴费</text>
					</view>
					<view class="quick-item" @click="navigateToQuickService('report')">
						<image class="quick-icon" src="/static/index/baogao.png"></image>
						<text class="quick-text">报告查询</text>
					</view>
					<view class="quick-item" @click="navigateToQuickService('more')">
						<image class="quick-icon" src="/static/index/more.png"></image>
						<text class="quick-text">更多服务</text>
					</view>
				</view>
			</view>

			<view class="doctor-search-section">
				<view class="section-header">
					<text class="section-title">医生查找</text>
					<!-- <text class="more-text">更多 ></text> -->
				</view>

				<view class="department-tabs">
					<view v-for="(dept, index) in departments" :key="index" class="dept-tab"
						:class="{ active: activeDept === index }" @click="changeDept(index)">
						{{ dept }}
					</view>
				</view>

				<view class="doctor-list">
					<view class="doctor-item" v-for="(doctor, index) in displayedDoctors" :key="index"
						@click="viewDoctorDetail(doctor)">
						<image class="doctor-avatar" :src="doctor.avatar"></image>
						<view class="doctor-info">
							<text class="doctor-name">{{ doctor.name }} <text
									class="doctor-title">{{ doctor.title }}</text></text>
							<text class="doctor-dept">{{ doctor.department }}</text>
							<text class="doctor-specialty">擅长：{{ doctor.specialty }}</text>
						</view>
						<view class="appointment-btn">预约</view>
					</view>
				</view>
			</view>

			<view class="health-online-section">
				<view class="health-header">
					<view class="health-title-container">
						<!-- <image class="health-icon" src="/static/images/health-icon.png"></image> -->
						<text class="health-title">健康动态</text>
					</view>
					<!-- <text class="more-text">更多 ></text> -->
				</view>

				<view class="tabs">
					<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
						:class="{ active: activeTab === index }" @click="changeTab(index)">
						{{ tab }}
					</view>
				</view>

				<view class="article-list">
					<view class="article-item" v-for="(article, index) in displayedArticles" :key="index"
						@click="openArticle(article)">
						<view class="article-content">
							<text class="article-title">{{ article.title }}</text>
							<view class="article-info">
								<image class="author-avatar" :src="article.avatar"></image>
								<text class="author-name">{{ article.name }}</text>
								<text class="article-date">{{ article.createTime }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchKeyword: '',
				showSearchResults: false,
				searchResults: {
					doctors: [],
					departments: []
				},
				globaApi: '',
				patientList: [], // 患者列表
				selectedPatient: null, // 当前选中的患者
				patientSearchKeyword: '', // 患者搜索关键词
				showPatientModal: false, // 控制患者详情/编辑模态框
				patientFormData: {
					id: null,
					name: '',
					age: null,
					gender: '',
					phone: '',
					medicalHistory: ''
				},
				activeTab: 0,
				activeDept: 0,
				tabs: ['医生发布', '医院动态', '健康新闻'],
				departments: ['内科', '外科', '儿科', '妇产科', '肿瘤科', '骨科'],
				displayedDoctors: [],
				displayedArticles: [],
				userType: 0,
				allDoctors: {
					// 内科医生
					0: [{
							id: '101',
							name: '张伟',
							title: '主任医师',
							department: '内科 - 心血管',
							specialty: '冠心病、高血压、心力衰竭、心律失常',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '102',
							name: '李明',
							title: '副主任医师',
							department: '内科 - 呼吸',
							specialty: '哮喘、慢阻肺、肺部感染、肺炎',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '103',
							name: '王芳',
							title: '主治医师',
							department: '内科 - 消化',
							specialty: '胃炎、肠炎、胃溃疡、胃食管反流病',
							avatar: '/static/doctors/women.png'
						}
					],
					// 外科医生
					1: [{
							id: '201',
							name: '刘强',
							title: '主任医师',
							department: '外科 - 普外',
							specialty: '肝胆外科、胰腺外科、微创手术',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '202',
							name: '陈勇',
							title: '副主任医师',
							department: '外科 - 胸外',
							specialty: '肺癌、食管癌、纵隔肿瘤',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '203',
							name: '赵杰',
							title: '主治医师',
							department: '外科 - 神经外科',
							specialty: '脑血管疾病、脑肿瘤、脊柱疾病',
							avatar: '/static/doctors/man.jpg'
						}
					],
					// 儿科医生
					2: [{
							id: '301',
							name: '周丽',
							title: '主任医师',
							department: '儿科 - 新生儿',
							specialty: '早产儿、新生儿疾病、儿童发育',
							avatar: '/static/doctors/women.png'
						},
						{
							id: '302',
							name: '吴小红',
							title: '副主任医师',
							department: '儿科 - 儿童哮喘',
							specialty: '小儿哮喘、过敏性疾病、肺炎',
							avatar: '/static/doctors/women.png'
						}
					],
					// 妇产科医生
					3: [{
							id: '401',
							name: '杨华',
							title: '主任医师',
							department: '妇产科 - 产科',
							specialty: '高危妊娠、产科并发症、产前诊断',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '402',
							name: '孙燕',
							title: '副主任医师',
							department: '妇产科 - 妇科',
							specialty: '宫颈疾病、卵巢囊肿、子宫内膜异位症',
							avatar: '/static/doctors/women.png'
						},
						{
							id: '403',
							name: '林玲',
							title: '主治医师',
							department: '妇产科 - 生殖',
							specialty: '不孕不育、辅助生殖技术、优生优育',
							avatar: '/static/doctors/women.png'
						}
					],
					// 肿瘤科医生
					4: [{
							id: '501',
							name: '郑阳',
							title: '主任医师',
							department: '肿瘤科 - 放疗',
							specialty: '肺癌放疗、头颈部肿瘤、放射治疗',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '502',
							name: '黄建国',
							title: '副主任医师',
							department: '肿瘤科 - 化疗',
							specialty: '乳腺癌、胃癌、结直肠癌化疗',
							avatar: '/static/doctors/man.jpg'
						}
					],
					// 骨科医生
					5: [{
							id: '601',
							name: '朱伟东',
							title: '主任医师',
							department: '骨科 - 脊柱',
							specialty: '颈椎病、腰椎间盘突出、脊柱侧弯',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '602',
							name: '唐明',
							title: '副主任医师',
							department: '骨科 - 关节',
							specialty: '关节置换、运动损伤、关节炎',
							avatar: '/static/doctors/man.jpg'
						},
						{
							id: '603',
							name: '彭辉',
							title: '主治医师',
							department: '骨科 - 手足',
							specialty: '手足外伤、手足畸形矫正、骨折',
							avatar: '/static/doctors/man.jpg'
						}
					]
				},
				allArticles: {
					0: [ // 医生发布
						// {
						// 	id: '101',
						// 	title: '高血压患者如何科学管理饮食？',
						// 	userName: '心内科主任医师 王健',
						// 	createTime: '2025-03-18',
						// 	views: '286',
						// 	avatar: '/static/index/yuyue.png'
						// },
						// {
						// 	id: '102',
						// 	title: '术后康复注意事项：这些误区一定要避开',
						// 	userName: '骨科主治医师 李娜',
						// 	createTime: '2025-03-16',
						// 	views: '192',
						// 	avatar: '/static/index/yuyue.png'
						// }
					],
					1: [ // 医院动态
						{
							id: '3',
							title: '我院引进最新达芬奇手术机器人系统',
							userName: '医院新闻中心',
							createTime: '2025-03-15',
							views: '543',
							avatar: '/static/index/yuyue.png'
						},
						{
							id: '4',
							title: '春季健康公益讲座：关爱女性乳腺健康',
							userName: '院办宣传科',
							createTime: '2025-03-12',
							views: '317',
							avatar: '/static/index/yuyue.png'
						}
					],
					2: [ // 健康新闻
						{
							id: '5',
							title: '最新研究：每天快走30分钟可降低心血管疾病风险',
							userName: '健康时报',
							createTime: '2025-03-20',
							views: '895',
							avatar: '/static/index/yuyue.png'
						},
						{
							id: '6',
							title: '世界睡眠日特别报道：如何改善失眠问题',
							userName: '健康科普小组',
							createTime: '2025-03-19',
							views: '678',
							avatar: '/static/index/yuyue.png'
						}
					],
					token: ''
				}
			}
		},
		onPullDownRefresh() {
			this.getArticles()
			if (this.userType === 1) {
				this.fetchPatientList();
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad() {
			// 初始化显示内科医生
			this.globaApi = getApp().globalData.baseUrl
			this.displayedDoctors = this.allDoctors[0];
			this.token = uni.getStorageSync('token');
			this.userType = uni.getStorageSync('userType')
			this.getArticles()
			if (this.userType == 1) {
				uni.setTabBarItem({
					index: 0,
					// "pagePath": "pages/index/sickSet",
					"iconPath": "/static/Tabbar/unindex.png",
					"selectedIconPath": "/static/Tabbar/index.png",
					"text": "患者管理"
				})
				uni.setTabBarItem({
					index: 1,
					"iconPath": "/static/Tabbar/unmessage.png",
					"selectedIconPath": "/static/Tabbar/message.png",
					"text": "医疗资讯发布"
				})
				uni.setTabBarItem({
					index: 2,
					"iconPath": "/static/Tabbar/unmine.png",
					"selectedIconPath": "/static/Tabbar/mine.png",
					"text": "个人中心"
				})
			}
			if (this.userType === 1) {
				this.fetchPatientList();
			}

		},
		methods: {
			onSearchInput(e) {
				this.searchKeyword = e.detail.value;
				if (this.searchKeyword.length > 0) {
					this.performSearch();
					this.showSearchResults = true;
				} else {
					this.showSearchResults = false;
				}
			},
			performSearch() {
				// 清空之前的搜索结果
				this.searchResults.doctors = [];
				this.searchResults.departments = [];

				const keyword = this.searchKeyword.toLowerCase();

				// 搜索医生
				Object.values(this.allDoctors).forEach(deptDoctors => {
					deptDoctors.forEach(doctor => {
						if (doctor.name.includes(keyword) ||
							doctor.department.toLowerCase().includes(keyword) ||
							doctor.specialty.toLowerCase().includes(keyword) ||
							doctor.title.toLowerCase().includes(keyword)) {
							this.searchResults.doctors.push(doctor);
						}
					});
				});

				// 搜索科室
				this.departments.forEach(dept => {
					if (dept.toLowerCase().includes(keyword)) {
						this.searchResults.departments.push(dept);
					}
				});
			},

			clearSearch() {
				this.searchKeyword = '';
				this.showSearchResults = false;
			},

			selectSearchResult(type, item) {
				if (type === 'doctor') {
					this.viewDoctorDetail(item);
				} else if (type === 'department') {
					const deptIndex = this.departments.findIndex(dept => dept === item);
					if (deptIndex !== -1) {
						this.changeDept(deptIndex);
					}
				}
				this.clearSearch();
			},

			submitSearch() {
				if (this.searchKeyword.length > 0) {
					this.performSearch();
					uni.navigateTo({
						url: `/pages/search/results?keyword=${encodeURIComponent(this.searchKeyword)}`
					});
				}
			},
			navigateToService(service) {
				console.log(`Navigating to ${service} service`);
				uni.navigateTo({
					url: `/pages/${service}/${service}`
				});
			},
			navigateToQuickService(service) {
				console.log(`Navigating to quick service: ${service}`);
				uni.navigateTo({
					url: `/pages/index/${service}`
				});
			},
			changeTab(index) {
				this.activeTab = index;
				console.log(`Changed to tab: ${this.tabs[index]}`);
				this.displayedArticles = this.allArticles[index];
			},
			changeDept(index) {
				this.activeDept = index;
				console.log(`Changed to department: ${this.departments[index]}`);
				// 根据选择的科室索引显示对应的医生
				this.displayedDoctors = this.allDoctors[index];
			},
			openArticle(article) {
				console.log(`Opening article: ${article.title}`);
				uni.navigateTo({
					url: `/pages/index/article?id=${article.id}`
				});
			},
			viewDoctorDetail(doctor) {
				console.log(`Viewing doctor: ${doctor.name}`);
				uni.navigateTo({
					url: `/pages/index/doctor?id=${doctor.id}&name=${doctor.name}&avatar=${doctor.avatar}`
				});
			},
			async getArticles() {
				uni.request({
					url: `${this.globaApi}/article/getArticle`,
					method: 'POST',
					success: (res) => {
						if (res.data.code === 200) {
							this.allArticles[0] = res.data.data.slice(-2)
							this.displayedArticles = res.data.data.slice(-2);
							console.log(`接收的数据：${res.data.data}`);
							console.log(`赋值的数据：${this.allArticles[0]}`);
							console.log(`赋值后数据：${this.allArticles}`);
						} else {
							console.log('查询失败');
						}
					},
					fail: () => {
						uni.hideLoading();
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},
			fetchPatientList() {
				uni.request({
					url: `${this.globaApi}/reservation/getReservationByDoctorId`,
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'token': this.token
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.patientList = res.data.data;
							console.log(this.patientList);
						} else {
							uni.showToast({
								title: '获取患者列表失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '网络错误，请稍后重试',
							icon: 'none'
						});
					}
				});
			},

			// 搜索患者
			searchPatients() {
				if (!this.patientSearchKeyword) {
					this.fetchPatientList();
					return;
				}

				uni.request({
					url: `${this.globaApi}/patient/search`,
					method: 'POST',
					data: {
						keyword: this.patientSearchKeyword
					},
					success: (res) => {
						if (res.data.code === 200) {
							this.patientList = res.data.data;
						} else {
							uni.showToast({
								title: '搜索患者失败',
								icon: 'none'
							});
						}
					}
				});
			},

			// 打开新增/编辑患者模态框
			openPatientModal(patient = null) {
				if (patient) {
					this.patientFormData = {
						...patient
					};
				} else {
					this.patientFormData = {
						id: null,
						name: '',
						age: null,
						gender: '',
						phone: '',
						medicalHistory: ''
					};
				}
				this.showPatientModal = true;
			},

			// 保存患者信息
			savePatient() {
				console.log(1);
				const url = this.patientFormData.id ?
					`${this.globaApi}/patient/update` :
					`${this.globaApi}/patient/add`;
				this.showPatientModal = false;
				// 校验表单
				if (!this.patientFormData.name) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				if (!this.patientFormData.age) {
					uni.showToast({
						title: '请输入年龄',
						icon: 'none'
					});
					return;
				}
				if (!this.patientFormData.gender) {
					uni.showToast({
						title: '请选择性别',
						icon: 'none'
					});
					return;
				}
				if (!this.patientFormData.phone) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}

				uni.request({
					url: url,
					method: 'POST',
					data: this.patientFormData,
					success: (res) => {
						if (res.data.code === 200) {
							uni.showToast({
								title: this.patientFormData.id ? '更新成功' : '新增成功',
								icon: 'success'
							});
							this.showPatientModal = false;
							this.fetchPatientList();
						} else {
							uni.showToast({
								title: '操作失败',
								icon: 'none'
							});
						}
					}
				});
			},

			// 删除患者
			deletePatient(patientId) {
				uni.showModal({
					title: '确认',
					content: '是否确定删除该患者？',
					success: (res) => {
						if (res.confirm) {
							uni.request({
								url: `${this.globaApi}/patient/delete`,
								method: 'POST',
								data: {
									id: patientId
								},
								success: (res) => {
									if (res.data.code === 200) {
										uni.showToast({
											title: '删除成功',
											icon: 'success'
										});
										this.fetchPatientList();
									} else {
										uni.showToast({
											title: '删除失败',
											icon: 'none'
										});
									}
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		/* background-color: #f8f8f8; */
		overflow: hidden;
	}

	.search-bar {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		position: relative;
	}

	.search-input-wrapper {
		flex: 1;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 15rpx 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.search-icon {
		font-size: 32rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.clear-icon {
		font-size: 24rpx;
		color: #999;
		padding: 10rpx;
	}

	.search-button {
		background-color: #f3d5ff;
		color: #333;
		padding: 15rpx 30rpx;
		border-radius: 50rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
	}

	/* 搜索结果样式 */
	.search-results {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		z-index: 100;
		max-height: 600rpx;
		overflow-y: auto;
		margin-top: 10rpx;
	}

	.no-results {
		padding: 30rpx;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}

	.result-section {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.result-section:last-child {
		border-bottom: none;
	}

	.result-section-title {
		padding: 0 30rpx 10rpx;
		font-size: 24rpx;
		color: #999;
	}

	.result-item {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
	}

	.result-item:active {
		background-color: #f8f8f8;
	}

	.result-icon {
		margin-right: 20rpx;
		font-size: 36rpx;
	}

	.result-content {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.result-primary {
		font-size: 28rpx;
		color: #333;
	}

	.result-secondary {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.search-placeholder {
		font-size: 28rpx;
		color: #999;
	}

	.search-button {
		background-color: #f3d5ff;
		color: #333;
		padding: 15rpx 30rpx;
		border-radius: 50rpx;
		margin: 0 20rpx;
		font-size: 28rpx;
	}

	/* Main services styles */
	.main-services {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.service-card {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		width: 23%;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
	}

	.service-icon {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}

	.service-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		text-align: center;
	}

	.service-subtitle {
		font-size: 20rpx;
		color: #999;
		text-align: center;
	}

	.tag-container {
		position: absolute;
		top: 0;
		right: 0;
	}

	.tag {
		background: linear-gradient(to right, #ff7f00, #ffaa00);
		color: #fff;
		font-size: 20rpx;
		padding: 5rpx 10rpx;
		border-radius: 0 20rpx 0 20rpx;
	}

	.quick-access-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.section-header {
		display: flex;
		align-items: baseline;
		margin-bottom: 30rpx;
		position: relative;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		margin-right: 10rpx;
	}

	.more-text {
		font-size: 24rpx;
		color: #999;
		position: absolute;
		right: 0;
	}

	.quick-access-grid {
		display: flex;
		justify-content: space-between;
	}

	.quick-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 23%;
	}

	.quick-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.quick-text {
		font-size: 24rpx;
		text-align: center;
	}

	.doctor-search-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.department-tabs {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.dept-tab {
		padding: 10rpx 15rpx;
		margin-bottom: 10rpx;
		font-size: 24rpx;
		border-radius: 30rpx;
		background-color: #f5f5f5;
	}

	.dept-tab.active {
		color: #fff;
		background-color: #3399ff;
	}

	.doctor-list {
		display: flex;
		flex-direction: column;
	}

	.doctor-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.doctor-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.doctor-info {
		flex: 1;
		margin-left: 20rpx;
	}

	.doctor-name {
		font-size: 30rpx;
		font-weight: bold;
	}

	.doctor-title {
		font-size: 26rpx;
		color: #3399ff;
		margin-left: 10rpx;
	}

	.doctor-dept {
		font-size: 24rpx;
		color: #666;
		margin: 6rpx 0;
	}

	.doctor-specialty {
		font-size: 24rpx;
		color: #999;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.appointment-btn {
		background-color: #f3d5ff;
		color: #333;
		padding: 10rpx 30rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
	}

	/* 健康资讯部分样式 */
	.health-online-section {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.health-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.health-title-container {
		display: flex;
		align-items: center;
	}

	.health-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.health-title {
		font-size: 32rpx;
		font-weight: bold;
	}

	.tabs {
		display: flex;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid #eee;
	}

	.tab-item {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		position: relative;
	}

	.tab-item.active {
		color: #3399ff;
		font-weight: bold;
	}

	.tab-item.active::after {
		content: '';
		position: absolute;
		bottom: -1rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 6rpx;
		background-color: #3399ff;
		border-radius: 3rpx;
	}

	.article-list {
		display: flex;
		flex-direction: column;
	}

	.article-item {
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.article-title {
		font-size: 30rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.article-info {
		display: flex;
		align-items: center;
	}

	.author-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 20rpx;
		margin-right: 10rpx;
	}

	.author-name {
		font-size: 24rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.article-date {
		font-size: 24rpx;
		color: #999;
		margin-right: 20rpx;
	}

	.article-views {
		font-size: 24rpx;
		color: #999;
	}





	.patient-management-container {
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		background-color: #f8f8f8;
		height: 100vh;
	}

	.patient-search-wrapper {
		display: flex;
		margin-bottom: 30rpx;
	}

	.patient-search-bar {
		flex: 1;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 15rpx 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		margin-right: 20rpx;
	}

	.patient-search-icon {
		font-size: 32rpx;
		color: #999;
		margin-right: 10rpx;
	}

	.patient-search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.patient-clear-icon {
		font-size: 24rpx;
		color: #999;
		padding: 10rpx;
	}

	.patient-add-btn {
		background-color: #4CAF50;
		color: white;
		padding: 15rpx 30rpx;
		border-radius: 50rpx;
		font-size: 28rpx;
	}

	.patient-list-scroll {
		/* height: calc(100vh - 800rpx); */
	}

	.patient-list-item {
		background-color: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
	}

	.patient-info {
		flex: 1;
		margin-right: 20rpx;
	}

	.patient-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.patient-name {
		font-size: 32rpx;
		font-weight: bold;
	}

	.patient-gender {
		font-size: 24rpx;
		color: #666;
	}

	.patient-details {
		display: flex;
		flex-direction: column;
	}

	.patient-phone,
	.patient-history {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
	}

	.patient-actions {
		display: flex;
		flex-direction: column;
	}

	.patient-edit-btn,
	.patient-delete-btn {
		padding: 10rpx 20rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.patient-edit-btn {
		background-color: #2196F3;
		color: white;
	}

	.patient-delete-btn {
		background-color: #f44336;
		color: white;
	}

	.patient-modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 1000;
	}

	.patient-modal-content {
		background-color: white;
		width: 85%;
		border-radius: 20rpx;
		padding: 30rpx;
	}

	.patient-modal-header {
		font-size: 32rpx;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30rpx;
	}

	.patient-form-item {
		margin-bottom: 20rpx;
	}

	.patient-form-item text {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}

	.patient-form-item input,
	.patient-form-item textarea {
		background-color: #f5f5f5;
		border-radius: 10rpx;
		padding: 15rpx;
		font-size: 28rpx;
	}

	.patient-form-item textarea {
		height: 150rpx;
	}

	.patient-form-item radio-group {
		display: flex;
	}

	.patient-form-item radio-group label {
		margin-right: 30rpx;
	}

	.patient-modal-footer {
		display: flex;
		justify-content: space-between;
		margin-top: 30rpx;
	}

	.patient-modal-cancel,
	.patient-modal-confirm {
		flex: 1;
		text-align: center;
		padding: 15rpx;
		border-radius: 50rpx;
		margin: 0 10rpx;
		font-size: 28rpx;
	}

	.patient-modal-cancel {
		background-color: #f5f5f5;
		color: #666;
	}

	.patient-modal-confirm {
		background-color: #4CAF50;
		color: white;
	}
</style>